<template>
  <div class="container">
    <MyComponent
    @pushText="addText"
    ></MyComponent>
    <ul>
      <li v-for="item in showTaskList" :key="item.id">
        <input type="checkbox" name="" :id="item.id" :checked="item.complete" @change="taggerCheck(item.id)">
        <label :class="item.complete ?'checkText':''" :for="item.id" style="margin: 0 10px;">{{item.text}}</label>
        <span class="icon" v-if="(item.complete == false)">未完成</span>
        <span class="icon1" v-else>完成</span>
      </li>
    </ul>
    <div class="box">
      <div v-for="item in btnList" :key="item.id" :class="(newTableId == item.id ? 'item checkedItem':'item')" @click="checkItem(item.id)">{{ item.text }}</div>
    </div>
  </div>
</template>

<script>
import MyComponent from './component.vue'
export default {
  name: 'MyApp',
  components: {
    MyComponent
  },
  data() {
    return {
      taskList: [],
      showTaskList: [],
      // 当前选中的标签
      newTableId: 1,
      newId: 0,
      btnList: [
        { id: 1, text: '全部' },
        { id: 2, text: '已完成' },
        { id: 3, text: '未完成' }
      ]
    }
  },
  created() {
    if(localStorage.getItem('taskList')) {
      this.taskList = JSON.parse(localStorage.getItem('taskList'))
      this.showTaskList = JSON.parse(JSON.stringify(this.taskList))
    }
    this.getNewList()
  },
  
  methods: {
    // 更新本地存储
    updateData(list) {
      let data = localStorage.getItem('taskList')
      if(data) {
        localStorage.removeItem('taskList')
        localStorage.setItem('taskList', JSON.stringify(list))
      } else {
        localStorage.setItem('taskList', JSON.stringify(list))
        console.log(localStorage.setItem('taskList', JSON.stringify(list)))
        return
      }
    },
    // 获取最新id
    getNewList() {
      if(!localStorage.getItem('taskId')) {
        localStorage.setItem('taskId', '0')
        let newId = localStorage.getItem('taskId')
        this.newId = parseInt(newId)
      } else {
        let newId = localStorage.getItem('taskId')
        this.newId = parseInt(newId)
      }
    },
    // 修改最新id
    updateNewId(id) {
      localStorage.removeItem('taskId'),
      localStorage.setItem('taskId', JSON.stringify(id))
    },
    // 新增任务
    addText(val) {
      console.log(this.newId)
      this.newId ++
      this.updateNewId(this.newId)
      this.taskList.unshift({
        id: this.newId,
        complete: false,
        text: val
      })
      console.log(this.taskList)
      this.updateData(this.taskList)
      this.checkItem(this.newTableId)
    },
    // 修改表单选择
    taggerCheck(id) {
      this.taskList.some(item => {
        if(item.id === id) {
          item.complete = !item.complete
          this.checkItem(this.newTableId)
          this.updateData(this.taskList)
          return true
        }
      })
      // console.log(this.taskList)
    },
    // 切换 table 栏
    checkItem(id) {
      this.showTaskList = []
      this.newTableId = id
      switch(id) {
        case 1:
          this.showTaskList = JSON.parse(JSON.stringify(this.taskList))
          break
        case 2:
          this.taskList.forEach(item => {
            if(item.complete) {
              this.showTaskList.push(item)
            }
          })
          break
        case 3:
          this.taskList.forEach(item => {
            if(!item.complete) {
              this.showTaskList.push(item)
            }
          })
          break
      }
    }
  }
}
</script>

<style scoped>
  ul, li {
    list-style: none;
  }
  .container{
    padding: 20px 20px;
    width: 600px;
    margin: 100px auto;
    border: 1px solid #ccc;
  }
  ul {
    width: 400px;
    border: 1px solid #ccc;
    padding: 0;
  }
  li {
    width: 400px;
    height: 35px;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
  }
  label{
    flex: 1;
  }
  .icon {
    padding: 3px 5px;
    display: block;
    float: right;
    background-color: #ff0;
    color: #333;
    font-weight: 500;
    border-radius: 5px;
  }
  .icon1{
    padding: 3px 5px;
    display: block;
    float: right;
    background-color: green;
    color: white;
    font-weight: 500;
    border-radius: 5px;
  }
  .box{
    width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .item {
    padding: 0 10px;
    height: 40px;
    background-color: #333;
    color: white;
    line-height: 40px;
    margin-bottom: 10px;
    cursor: pointer;
  }
  .checkedItem {
    background-color: aqua;
  }
  .checkText {
    text-decoration: line-through;
  }
</style>